<template>
    <div class="item-content">
        <div class="check-total">
            <div class="total-item">
                <div class="total-name active">
                    <span class="circle"></span>
                    {{ data.title.leftTitle.name }}
                </div>
                <div class="total-num">
                    <CountTo :value="data.title.leftTitle.num" :duration="2000" />
                </div>
            </div>
            <div class="total-item">
                <div class="total-name">
                    <span class="circle"></span>
                    {{ data.title.rightTitle.name }}
                </div>
                <div class="total-num">
                    <CountTo :value="data.title.rightTitle.num" :duration="2000" />
                </div>
            </div>
        </div>
        <div class="check-ul">
            <div class="check-li">
                <div class="li-name">
                    {{ data.content.leftContent.name }}
                    <span></span>
                </div>
                <div class="li-num">
                    <CountTo :value="data.content.leftContent.num" :duration="2000" />
                </div>
            </div>
            <div class="check-li">
                <div class="li-name">
                    {{ data.content.centerContent.name }}
                    <span class="yellow"></span>
                </div>
                <div class="li-num yellow">
                    <CountTo :value="data.content.centerContent.num" :duration="2000" />
                </div>
            </div>
            <div class="check-li">
                <div class="li-name">
                    {{ data.content.rightContent.name }}
                    <span class="red"></span>
                </div>
                <div class="li-num red">
                    <CountTo :value="data.content.rightContent.num" :duration="2000" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
import CountTo from '@/components/CountTo/index.vue';

defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.item-content {
    width: 100%;
    height: 100%;
}

.item-content .check-total {
    display: flex;
    height: 4vw;
    margin: 1vw 0;
    justify-content: space-between;
    padding: 0 1vw;
}

.total-item .total-name {
    line-height: 1.041667vw;
    font-size: 0.729167vw;
    color: #fff;
    margin-bottom: 0.520833vw;
}

.total-name .circle {
    display: inline-block;
    width: 0.260417vw;
    height: 0.260417vw;
    border: 1px solid #54e5fc;
    border-radius: 50%;
    margin-right: 0.208333vw;
}

.total-item .total-num {
    height: 3.2291vw;
    color: #fff;
    font-family: Digital;
    font-size: 2vw;
    text-align: center;
    color: rgb(84, 229, 252);
    letter-spacing: 0.2vw;
}

.item-content .check-ul {
    display: flex;
    width: 100%;
    height: 62%;
    justify-content: space-between;
}

.item-content .check-ul .check-li {
    flex-basis: 9vw;
    flex-grow: 0;
    border: 1px solid rgba(84, 229, 252, 0.24);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1vw;
    justify-content: center;
}

.check-li .li-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin-bottom: 2vw;
}

.check-li .li-name span {
    border: 1px solid #00e6b6;
    background-color: #00e6b6;
    border-radius: 50%;
    width: 0.2vw;
    height: 0.2vw;
}

.check-li .li-num {
    font-size: 1.25vw;
    font-family: homeTime;
    color: #00e6b6;
    letter-spacing: 0.2vw;
    text-shadow: 0 0 0.364583vw rgba(0, 230, 182, 0.49);
}

.check-li .yellow {
    color: #e6e600;
}

.check-li span.yellow {
    border: 1px solid #e6e600;
    background: #e6e600;
}

.check-li .purple {
    color: #e600dd;
}

.check-li span.purple {
    border: 1px solid #e600dd;
    background: #e600dd;
}

.total-name.active {
    color: #00e6b6;
}
</style>